<template>
    <!-- pages/collectioncode/bindbox/index.wxml -->
    <view>
        <view class="boxcom" v-if="!deviceDetail.status">
            <view class="mt-60">输入设备编号或扫描设备二维码完成绑定</view>
            <view class="flexbox-sb inputbox">
                <input type="text" @input="onInput" :value="sn" placeholder="请输入SN号或扫描设备底部二维码" />
                <van-icon name="scan" size="24px" @tap.native="getcode" />
            </view>
        </view>
        <view class="boxcom bg" v-if="deviceDetail.status">
            <view class="flexbox-sb">
                <view>{{ deviceDetail.equipmentType + deviceDetail.equipmentModel }}</view>
                <view>状态：正常</view>
            </view>
            <view class="mt-20">设备号：{{ deviceDetail.sn }}</view>
            <view class="mt-20">绑定时间：{{ deviceDetail.bindTime }}</view>
        </view>
        <view class="btn btn1" v-if="!deviceDetail.status" @tap.stop.prevent="onBind" data-type="1">立即绑定</view>
        <view class="btn btn2" v-if="deviceDetail.status" @tap.stop.prevent="onBind" data-type="2">解除绑定</view>
        <view class="msg" v-if="deviceDetail.status">如果要绑定其他设备请先解除当前设备</view>
        <view class="imgbox" v-if="!deviceDetail.status">
            <view>如何查找SN号?</view>
            <view class="mt-20 text-9">翻转语音播报云音箱，即可查看设备底部的二维码,及SN号;</view>
            <image :src="shopimgUrl + 'bindbox.jpg'" @tap.stop.prevent="previewImg" :data-item="shopimgUrl + 'bindbox.jpg'"></image>
        </view>

        <van-overlay :show="showpay" @tap.native="onClickHide">
            <view class="overlaybox" @tap.stop.prevent="shop">
                <view class="tit2">解除绑定需要输入支付密码验证</view>
                <padinput class="mt-20" id="padinput" :Value="value" @infotan="getpassword($event, { tagId: 'padinput' })" :bool="false" :isFocus="isFocus"></padinput>
                <view class="hrs mt-40"></view>
                <view class="btns mt-20" @tap="onUnDind">取消解绑</view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/collectioncode/bindbox/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            shopimgUrl: app.globalData.shopimgUrl,
            incomingInfo: null,
            // 进件对象
            deviceDetail: null,
            // 设备详情
            sn: '',
            value: '',
            showpay: false,
            isFocus: false,
            kzs: false,
            type: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
        this.onLoadClone3389(options);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389(options) {
            // 获取进件（盒子商户）信息
            _request
                .get('/box/getIncoming', {
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data;
                        this.setData(
                            {
                                incomingInfo: data
                            },
                            () => {
                                const vm = this; // 查看设备详情

                                _request
                                    .get('/box-device/deviceDetail', {
                                        shopId: data.shopId
                                    })
                                    .then((res) => {
                                        if (res.data.code == 200) {
                                            console.log(res.data.data);
                                            vm.setData({
                                                deviceDetail: res.data.data
                                            });
                                        }
                                    });
                            }
                        );
                    }
                });
        },

        // 输入
        onInput(e) {
            this.setData({
                sn: e.detail.value
            });
        },

        //点击图片进行预览，长按保存分享图片
        previewImg(e) {
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: [e.currentTarget.dataset.item] // 需要预览的图片http链接列表
            });
        },

        // 扫码
        getcode() {
            let vm = this;
            uni.scanCode({
                //扫描API
                success: function (res) {
                    const sn = res.result;
                    console.log(sn);
                    vm.setData({
                        sn
                    });
                },
                fail: function (res) {
                    uni.showToast({
                        title: '识别失败，请扫描正确的二维码',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        },

        // 校验规则
        getRlue(msg) {
            const { type } = this;
            let title = '';

            if (type == 2) {
                switch (msg) {
                    case 'GM-1M998':
                        title = '解绑失败(998) ，请联系客服，或重新尝试';
                        break;

                    case 'GB-1M998':
                        title = '解绑失败(998) ，请联系客服，或重新尝试';
                        break;

                    case 'GB-1M501':
                        title = '解绑失败(501)，该设备不存在，请联系客服或重新尝试';
                        break;

                    case 'GB-1M509':
                        title = '弹窗提示语︰解绑失败(509)，该设备异常，请联系客服或重新尝试';
                        break;

                    case 'GB-1M504':
                        title = '解绑失败(504)，该设备绑定异常，请联系客服或重新尝试';
                        break;

                    case 'GB-1M505':
                        title = '解绑失败(505)，该设备已停用，请联系客服或重新尝试';
                        break;

                    case 'GB-1M506':
                        title = '解绑失败(506)，该设备已被注销，请联系客服或重新尝试';
                        break;

                    case 'GB-1M507':
                        title = '解绑失败(507)，该设备未激活，请联系客服或重新尝试';
                        break;

                    case 'GB-1M510':
                        title = '解绑失败(510)，查询不到该设备，请联系客服或重新尝试';
                        break;

                    default:
                        title = msg;
                        break;
                }
            } else if (type == 1) {
                switch (msg) {
                    case 'GM-1M998':
                        title = '绑定异常(998)，请联系客服，或重新尝试';
                        break;

                    case 'GM-1M997':
                        title = '绑定异常(997) ，请联系客服，或重新尝试';
                        break;

                    case 'GB-1M500':
                        title = '绑定异常(500)，该设备无法识别，请使用官方设备';
                        break;

                    case 'GB-1M501':
                        title = '绑定失败(501)，该设备不存在，请联系客服或重新尝试';
                        break;

                    case 'GB-1M209':
                        title = '绑定异常(209)，当前门店未进行收款认证，请先进行收款认证';
                        break;

                    case 'GB-1M509':
                        title = '绑定异常(509),当前设备无法绑定，请联系客户更换';
                        break;

                    case 'GB-1M504':
                        title = '绑定异常(504) ，当前设备已绑定其他账号，请更换设备';
                        break;

                    case 'GB-1M505':
                        title = '绑定异常(505)，当前设备已被禁用，请更换设备，或联系客服';
                        break;

                    default:
                        title = msg;
                        break;
                }
            }

            return title;
        },

        // 绑定设备
        bindDevice() {
            const vm = this;
            const { sn, incomingInfo } = this; // 绑定设备

            _request
                .postObj('/box-device/bindDevice', {
                    shopId: incomingInfo.shopId,
                    sn
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '绑定成功',
                            icon: 'none',
                            duration: 1500
                        });
                        setTimeout(() => {
                            vm.setData({
                                sn: '',
                                value: ''
                            });
                            vm.onLoadClone3389({});
                        }, 1000);
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: vm.getRlue(res.data.message),
                            showCancel: false,
                            confirmText: '知道了'
                        });
                    }
                });
        },

        // 解绑设备
        unbindDevice() {
            const { deviceDetail, incomingInfo } = this;
            const vm = this;

            _request
                .postObj('/box-device/unbindDevice', {
                    shopId: incomingInfo.shopId,
                    sn: deviceDetail.sn
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: '解绑成功',
                            icon: 'none',
                            duration: 1500
                        });
                        vm.setData(
                            {
                                showpay: false,
                                sn: '',
                                value: ''
                            },
                            () => {
                                setTimeout(() => {
                                    vm.onLoadClone3389({});
                                }, 1000);
                            }
                        );
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: vm.getRlue(res.data.message),
                            showCancel: false,
                            confirmText: '知道了'
                        });
                    }
                });
        },

        // 绑定
        onBind(e) {
            const type = e.target.dataset.type;
            this.setData({
                type
            });

            if (type == 1) {
                this.bindDevice();
            } else {
                this.setData({
                    showpay: true,
                    isFocus: true
                });
            }
        },

        // 按钮解绑
        onUnDind() {
            if (this.kzs) {
                return;
            }

            if (this.value.length == 6) {
                _request
                    .get('/settings/initPayWord', {
                        userId: uni.getStorageSync('userid')
                    })
                    .then((res) => {
                        if (res.data.message == '支付密码还未设置' && res.data.data == 0) {
                            uni.showToast({
                                title: '支付密码还未设置',
                                icon: 'none',
                                duration: 1000
                            });

                            if (this.kzs) {
                                return;
                            }

                            this.setData({
                                kzs: true
                            });
                            setTimeout(() => {
                                this.setData({
                                    showpay: false,
                                    isFocus: false,
                                    value: ''
                                });
                                uni.navigateTo({
                                    url: '/pages/setpaypassword/index'
                                });
                                setTimeout(() => {
                                    this.setData({
                                        kzs: false
                                    });
                                }, 1000);
                            }, 1000);
                        } else if (res.data.message == '支付密码已设置' && res.data.data == 1) {
                            _request
                                .postObj('/settings/checkPayWord', {
                                    payWord: this.value,
                                    userId: uni.getStorageSync('userid')
                                })
                                .then((res) => {
                                    this.setData({
                                        kzs: true
                                    });
                                    this.setData({
                                        value: ''
                                    });

                                    if (res.data.code === 200) {
                                        this.unbindDevice();
                                        setTimeout(() => {
                                            this.setData({
                                                kzs: false
                                            });
                                        }, 1000);
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none',
                                            duration: 2000
                                        });
                                        setTimeout(() => {
                                            this.setData({
                                                kzs: false
                                            });
                                        }, 1000);
                                    }
                                });
                        }
                    });
            } else {
                uni.showToast({
                    title: '请输入正确支付密码',
                    icon: 'none',
                    duration: 1000
                });
                setTimeout(() => {
                    this.setData({
                        kzs: false
                    });
                }, 1000);
            }
        },

        // 取消支付
        onClickHide() {
            this.setData({
                showpay: false,
                value: '',
                isFocus: false
            });
        },

        // 获取密码
        getpassword(e, _dataset) {
            /* ---处理dataset begin--- */
            this.datasetHandle(e, _dataset);
            /* ---处理dataset end--- */
            this.setData({
                value: e.detail.inputValue
            });
        },

        shop() {
            console.log('占位：函数 shop 未声明');
        }
    }
};
</script>
<style>
/* pages/collectioncode/bindbox/index.wxss */

.boxcom {
    margin: 20rpx;
}

.bg {
    background: #ff8722;
    color: #fff;
    padding: 20rpx;
    margin: 40rpx;
    border-radius: 10rpx;
}

.btn {
    width: 670rpx;
    margin: 0 40rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44px;
    margin-top: 40rpx;
}

.btn1 {
    color: #fff;
    background: #ff8722;
    margin-top: 100rpx;
}

.btn2 {
    color: #ff8722;
    border: 1px solid #ff8722;
}

.imgbox {
    margin: 200rpx 20rpx 0 20rpx;
    border: 1px solid #999;
    padding: 20rpx;
    box-sizing: border-box;
}

.imgbox image {
    width: 670rpx;
    margin-top: 20rpx;
}

.inputbox {
    width: 670rpx;
    margin: 60rpx 20rpx 0rpx 20rpx;
    border-bottom: 1px solid #999;
    padding-bottom: 20rpx;
}

input {
    width: 500rpx;
}

.msg {
    margin-top: 20rpx;
    text-align: center;
    font-size: 24rpx;
    color: #999;
}

.overlaybox {
    position: absolute;
    bottom: 0rpx;
    background: #ffffff;
    padding: 40rpx 20rpx;
    width: 650rpx;
    top: 20%;
    height: 350rpx;
    margin: 0 auto;
    left: 0;
    box-sizing: border-box;
    right: 0;
    border-radius: 10rpx;
}

.tit {
    width: 100%;
    text-align: center;
    margin-bottom: 40rpx;
}

.tit2 {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
    margin-bottom: 40rpx;
}

.btns {
    width: 100%;
    text-align: center;
    font-size: 40rpx;
}

.text-9 {
    color: #999;
    font-size: 24rpx;
}
</style>
